<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>机动车档案详情</title>
<link rel="stylesheet" type="text/css" href="${ctx}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${ctx}/css/css.css" />
<script type="text/javascript" src="${ctx}/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="${ctx}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<style type="text/css">
#TableDatatp1{position: fixed;right: 20px;top: 50px;}
*#TableDatatp1{{position:absolute;right:expression(eval(document.documentElement.scrollRight+20));top:expression(eval(document.documentElement.scrollTop+100))}}
#TableDatatp1 a{color: #ffffff;
		background: #666666;
    border-bottom: 1px solid #444444;
    display: block;
    font-size: 14px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    width: 100px;
	}
#TableDatatp1 a:hover{background: #eb6014
;
}
body{position: relative;}
</style>
</head>
<script type="text/javascript"> 
var jsonstr="[]";  
var jsonarray = eval('('+jsonstr+')'); 
$(function(){
	var htmlPicArea = "";
	var TypeListArea = "";
	//循环列表,加载第一个档案类型所有图片
	<c:forEach items="${listTpurl}" var="obj" varStatus="status">
		    var url="${obj.singleIpaddress}";
			if("${obj.id}"=='1'){
			var picmc=url.substring(url.lastIndexOf("/")+1);
			htmlPicArea += "<img src=\""+url+"\" width=\"70%\" height=\"50%\"/>";
			}
	</c:forEach>
	//TypeListArea += "<div onClick=\"a_click(fileNameType1)\"><a href=\"#"+i+"\" style=\"background: #eb6014\" id=\"${status.index+1}\">身份证明</a></div>";			

	//var array = new Array();
	//转json数组
	//var jsonArray="{}";
	            
	<c:forEach items="${listTpurl}" var="t">  
		//array.push("${t.id}","${t.singleIpaddress}"); 
	    var formdata = {  
	            "id" : "fileNameType"+"${t.id}",  
	            "singleIpaddress" : "${t.singleIpaddress}",  
	        };
	    jsonarray.push(formdata); 
	</c:forEach>	
     
    // TypeListArea += "<div style=\"margin-bottom:50px\"></div>";
	//$("#TableDatatp1").html(TypeListArea);
	$("#TableDatatp2").html(htmlPicArea);
	//location.hash="#${picmc}";
	
});
function a_click(o){
	$("#"+o+" a").attr("style","background: #666666;");
	$("#"+o).attr("style","background: #eb6014;");
	showPic(o);
}

//根据文件类型id显示相应的档案图片
function showPic(id){
	$("#TableDatatp2").empty();
	for(var i=0;i<jsonarray.length;i++){	
		if(jsonarray[i].id==id){
			tbody="";
			tbody += "<div><img src=\""+jsonarray[i].singleIpaddress+"\" width=\"70%\" height=\"50%\"/></div>";
			$("#TableDatatp2").append(tbody);
		}
	}
}
</script>
<body>
	<div id="TableDatatp1">
	<div style="float:right;">
	<div onClick="a_click(this.id)" id="fileNameType1"><a href="#fileNameType11" style="background: #eb6014" id="fileNameType11">身份证明</a></div>	
	<div onClick="a_click(this.id)" id="fileNameType2"><a href="#fileNameType21" style="background: #eb6014" id="fileNameType21">申请表</a></div>	
	<div onClick="a_click(this.id)" id="fileNameType3"><a href="#fileNameType31" style="background: #eb6014" id="fileNameType31">交强险</a></div>	
	<div onClick="a_click(this.id)" id="fileNameType4"><a href="#fileNameType41" style="background: #eb6014" id="fileNameType41">纳税证明</a></div>
	<div onClick="a_click(this.id)" id="fileNameType5"><a href="#fileNameType51" style="background: #eb6014" id="fileNameType51">来历证明</a></div>
	<div onClick="a_click(this.id)" id="fileNameType6"><a href="#fileNameType61" style="background: #eb6014" id="fileNameType61">采集合格证</a></div>	
	<div onClick="a_click(this.id)" id="fileNameType7"><a href="#fileNameType71" style="background: #eb6014" id="fileNameType71">查验记录表</a></div>
	</div>
	<div style="float:left;">
	<table cellspacing="0" cellpadding="0" border="0" width="100%" class="dananguanglikuang">	     
		     	 <tr>
		             <th align="right" height="26">号牌号码：</th>
		             <td>
		                 <input type="text" id="hphmmc" name="hphmmc"  value="${info.hphmmc }" readonly="readonly">
		             </td>
		         </tr>
		         <tr>
		             <th align="right" height="26">车辆品牌：</th>
		             <td>
		                 <input type="text" id="clpp1" name="clpp1"  value="${info.clpp1 }" readonly="readonly"/>
		             </td>
		         </tr>
		         <tr>
		             <th align="right" height="26">号牌种类：</th>
		             <td>
		                 <input type="text" id="hpzl" name="hpzl" value="${info.hpzlmc }" readonly="readonly"/>
		             </td>
		             </tr>
		     	 <tr>
		             <th align="right">车辆颜色：</th>
		             <td>
		                 <input type="text" id="csys" name="csys"  value="${info.csysmc }" readonly="readonly"/>
		             </td>
		         </tr>
		         <tr>
		              <th align="right" height="26">车辆识别编号：</th>
		             <td>
		                 <input type="text" id="clsbdh" name="clsbdh" value="${info.clsbdh }" readonly="readonly"/>
		             </td>
		         </tr>
		         <tr>
		             <th align="right" height="26">发动机编号：</th>
		             <td>
		                <input type="text" id="fdjh" name="fdjh"  value="${info.fdjh }" readonly="readonly"/>
		             </td>
		         </tr>
		         <tr>
		             <th align="right" height="26">所有人：</th>
		             <td>
		                 <input type="text" id="syr" name="syr"  value="${info.syr }" readonly="readonly"/>
		             </td>
		         </tr>
		    </table>
		    </div>				
	<div style="margin-bottom:30px"></div>
	      <div data-options="region:'south',border:false" style="height: 60px;">
				    <input type="hidden" id="currentXh" value="${info.xh}"/>
					<input type="hidden" id="startTime" value="${startTime}"/>
					<input type="hidden" id="endTime" value="${endTime}"/>
					<!-- 上一个机动车序号 -->
					<input type="hidden" id="preXh" value="${preXh}"/>
					<!-- 下一个机动车序号 -->
					<input type="hidden" id="nextXh" value="${nextXh}"/>
					<!-- 当前页数所有的机动车序号 -->
					<input type="hidden" id="xhs" value="${xhs }"/>
					<!-- 总页数 -->
					<input type="hidden" id="totalPage" value="${pageInfo.totalPage}"/>
					<!-- 当前页数 -->
					<input type="hidden" id="currentPage" value="${pageInfo.currentPage}"/>
					<!-- 每一页大小 -->
					<input type="hidden" id="pageSize" value="${pageInfo.pageSize}"/>
					<!--当前数据在xhs中的位置-->
					<input type="hidden" id="currentIndex" value="${pageInfo.currentIndex}"/>
               <div class="diyipaidhusnfhenfnf1" style="margin:2px;">
					    <c:choose>
	                        <c:when test="${nextXh ne '0'}"> 
	                         <a href="#" style=" float: right;" class="congzhim" onClick="javascript :pageJump('${nextXh }','pageDown');" style="visibility: visible;">下一条</a>
	                        </c:when>
	                        <c:otherwise>
	                            <a href="#" style=" float: right;" class="congzhim1">下一条</a>
	                        </c:otherwise>   
	                    </c:choose>
	                    <c:choose>
	                        <c:when test="${preXh ne '0'}"> 
	                            <a href="#" class="congzhim" style=" float: right; margin: 0 15px 0 0 ;" onClick="javascript :pageJump('${preXh}','pageUp');" style="visibility: visible;">上一条</a>
	                        </c:when>
	                        <c:otherwise>
	                            <a href="#" style=" float: right; margin: 0 15px 0 0 ;" class="congzhim1">上一条</a>
	                        </c:otherwise> 
                       </c:choose>
	          </div> 
         </div>
	</div>
	<div id="TableDatatp2"></div>


</body>

<script type="text/javascript">


//查询信息
function pageJump(_xh,upOrDown){
	var currentPage=$('#currentPage').val();//获取当前页数
    var totalPage=$('#totalPage').val();//总页数
    var index=$('#currentIndex').val();//当前数据在当前分页页面中的位置
    var pageSize=$('#pageSize').val();//每一页展示的个数
	var currentXh=$('#currentXh').val();//当前机动车序号
    var xhs=$('#xhs').val();//当前分页所有的xh,已都好形式分隔开
    var xhArr=[];
    if(null!=xhs && undefined!=xhs){
        xhArr=xhs.split(',');
    }
    if(upOrDown=='pageUp'){
        if(index==0){
            index=Number(pageSize)-1;
            _xh='0,'+_xh+','+currentXh;
            currentPage=Number(currentPage)-1;//减一页
        }else{
            _xh=getPreOrNextXh(_xh,xhArr,upOrDown)+','+_xh+','+currentXh;
        }
    }else if(upOrDown=='pageDown'){
        //下一页
        if(index==Number(pageSize)-1){
            index=0;
            _xh=currentXh+','+_xh+',0';
            currentPage=Number(currentPage)+1;//加一页
        }else{
            index=Number(index)+1;
            _xh=currentXh+','+_xh+','+getPreOrNextXh(_xh,xhArr,upOrDown);
        }
    }
    var startTime=$('#startTime').val();//开始时间
    var endTime=$('#endTime').val();//结束时间
    var param={
    	xh:_xh,
    	xhs:xhs,
    	currentPage:currentPage,
    	pageSize:pageSize,
    	totalPage:totalPage,
    	currentIndex:index,
    	startTime:startTime,
    	endTime:endTime
    };
    parent.addTab("机动车档案审核","${ctx}/yxxx/findYxshByxhFirstIn.htm?xh="+_xh+"&xhs="+xhs+
      "&currentPage="+currentPage+"&totalPage="+totalPage+
      "&pageSize="+pageSize+"&currentIndex="+index+"&startTime="+startTime+"&endTime="+endTime);
}

</script>